<template>
  <!--此页面只针对于iosAPP-->
  <div class="c-minh c-p">
    <div class="c-fs24 c-pv20 c-textAlign-c c-bg-syellow">请完善个人信息，以便向您提供更加优质的服务！</div>
    <!-- <div class="c-flex-column c-aligni-center c-ph24 c-mt40">
      <img :src="imgUrl" @error="imgUrl = require('../../../assets/defult270.png')" class="c-block c-ww80 c-hh80 c-bd1" />
      <div class="c-fs30 c-mt10">{{companyName}}</div>
    </div> -->
    <div class="c-mt20">
      <div class="c-pv32 c-bd-b1-mgray c-flex-row c-aligni-center c-ph24">
        <span class="icon iconfont c-fs36 c-hh36 c-lh c-block c-fc-gray">&#xe66b;</span>
        <input type="tel" v-model="mobile" name="" placeholder="请输入手机号" maxlength="13" class="c-fs26 c-fc-gray c-lh36 c-ml10 c-bd0 c-w50" />
        <span class="c-fs24 theme-fc c-lh36 c-w40 c-block c-textAlign-c c-bd-l1-mgray" @click="getYzcode">{{yzText}}</span>
      </div>
      <div class="c-pv32 c-bd-b1-mgray c-flex-row c-aligni-center c-ph24">
        <span class="icon iconfont c-fs36 c-hh36 c-lh c-block c-fc-gray">&#xe66b;</span>
        <input type="tel" v-model="imgCode" name="" placeholder="请输入验证码" class="c-fs26 c-fc-gray c-lh36 c-ml10 c-bd0 c-w50" />
        <div class="c-flex-row c-flex-center c-w40 c-bd-l1-mgray">
          <img :src="$addXossFilter(codeImgInfo.img)" @click="getImgCode" class="c-w50" alt="">
        </div>
      </div>
      <div class="c-pv32 c-bd-b1-mgray c-flex-row c-aligni-center c-ph24">
        <span class="icon iconfont c-fs36 c-hh36 c-lh c-block c-fc-gray">&#xe660;</span>
        <input type="text" v-model="code" name="" placeholder="请输入验证码" @input="code=code.slice(0, 4)" maxlength="4" class="c-fs26 c-fc-gray c-lh36 c-ml10 c-bd0 c-w90 needsclick" />
      </div>
    </div>
    <div class="c-fc-white c-lh c-fs32 c-pv28 c-textAlign-c c-br10 c-mt120 theme-bg c-mh24" @click="submit">确定</div>
    <section v-if="protocolInfo" class="c-pl24 c-pb20 c-flex-row c-flexw-wrap c-aligni-center c-justify-start c-lh38 c-fs20 theme-fc c-mt20" @click="changeCheckAgreement">
      <i v-show="!isCheckAgreement" class="iconfont c-fs20 c-fc-gray c-pr20">&#xe6f7;</i>
      <i v-show="isCheckAgreement" class="iconfont c-fs20 c-fc-gray c-pr20">&#xe6f2;</i>
      <span class="c-fc-gray">已阅读并同意</span>
      <template v-if="isAndroidApp || isiOSApp">
        <span @click.stop="linkToProtocol(protocolInfo.useProtocolUrl)">《用户服务协议》</span>
        <span @click.stop="linkToProtocol(protocolInfo.privacyProtocolUrl)">《隐私政策》</span>
      </template>
      <template v-else>
        <span @click.stop="clickProtocol(item)" v-for="(item, index) in protocolInfo" :key="index">《{{item.name}}》</span>
      </template>
    </section>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: "IosBindMobile",
  components: {
  },
  props: [],
  beforeCreate() { },
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      companyId: '',
      num: 60,
      interval: null,
      yzText: "获取验证码",
      isYz: true,
      mobile: null,
      code: null, // 验证码
      isClick: false,
      isSubmit: true, //防止多次提交
      isAgree: 1, //ios app同意条款
      enableProtocol: 0,
      enableProtocolAppLogin: 0,
      codeImgInfo: '', //图形验证码信息
      imgCode: '', //填入的图形验证码
      isCheckAgreement: true,
      protocolInfo: null,
      isAndroidAp: false,
      isiOSApp: false
    };
  },
  created() {
  },
  mounted() { },
  computed: {},
  watch: {
    mobile() {
      if (this.mobile == null && isNaN(this.mobile)) {
        this.mobile = "";
      } else {
        if (this.mobile != null) {
          this.mobile.length > 11 && this.mobile.substr(0, 11);
        }
      }
    }
  },
  methods: {
    getImgCode() {
      let $this = this;
      if ($this.isLoading == true) {
        return;
      }
      $this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}common/captcha`, res => {
        $this.codeImgInfo = res;
        $this.isLoading = false;
      }, failRes => {
        $this.isLoading = false;
      });
    },
    //跳转到用户协议页面
    goInfo(index) {
      this.$routerGo(this, "push", { path: '/homePage/agent/protocolInfo?type=user' });
    },
    getYzMethod: function () {
      this.isYz = false;
      this.num -= 1;
      this.yzText = this.num + "秒后重新获取";
      if (this.num == 0) {
        clearInterval(this.interval);
        this.yzText = "获取验证码";
        this.isYz = true;
        this.num = 60;
        this.isClick = false;
      }
    },
    getYzcode: function () {
      if (!this.isClick) {
        this.isClick = true;
        if (this.mobile != null) {
          if (this.imgCode == '') {
            this.$showCjToast({
              text: "图片验证码不能为空",
              type: "warn",
            });
            this.isClick = false;
          } else {
            let $this = this;
            $this.yzText = "发送中";
            utilJs.postMethod(
              global.apiurl + "members/sendCode",
              {
                mobile: this.mobile,
                isBindMobile: false,
                isiOSLogin: 1,
                companyId: this.companyId,
                captcha: this.imgCode,
                captchaKey: this.codeImgInfo.key,
              },
              res => {
                if (res.errMsg) {
                  $this.yzText = "获取验证码";
                  $this.isClick = false;
                  $this.$showCjToast({
                    text: res.errMsg,
                    type: "warn",
                  });
                } else {
                  $this.interval = setInterval($this.getYzMethod, 1000);
                }
              },
              function () {
                clearInterval($this.interval);
                $this.yzText = "获取验证码";
                $this.isYz = true;
                $this.num = 60;
                $this.isClick = false;
              }
            );
          }
        } else {
          this.$showCjToast({
            text: "手机号不能为空",
            type: "warn",
          });
          this.isClick = false;
        }
      }
    },
    submit: function () {
      if (this.isAgree == 0) {
        this.$showCjToast({
          text: "登陆注册同意用户协议",
          type: "warn",
        });
        return;
      }
      if (!this.isCheckAgreement && this.protocolInfo) {
        this.$showCjToast({
          text: "请先同意相关协议！",
          type: "warn",
        })
        return;
      }

      let $this = this;
      if (this.mobile != null && this.code != null) {
        if (this.isSubmit == true) {
          this.isSubmit = false;
          utilJs.postMethod(
            global.apiurl + "members/bindMobile",
            {
              mobile: this.mobile,
              code: this.code,
              isiOSLogin: 1,
              companyId: this.companyId
            },
            function (loginRes) {
              $this.isSubmit = true;
              $this.$showCjToast({
                text: "登录成功",
                type: "success",
              }).then(() => {
                window.localStorage.clear();
                window.localStorage.setItem("uMobile", $this.mobile);
                window.localStorage.setItem("companyId", loginRes.c);
                window.localStorage.setItem(loginRes.c, loginRes.c);
                window.localStorage.setItem("userId", loginRes.u);
                window.localStorage.setItem("token", loginRes.t);
                window.localStorage.setItem(loginRes.c + "|token", loginRes.t);
                utilJs.setStoreId();
                if (utilJs.isAndoridNewApp()) {
                  let data = {
                    type: 'login',
                    path: '/',
                    token: loginRes.t,
                    userId: loginRes.u,
                    companyId: loginRes.c
                  }
                  window.androidWechatRoute.doAction(JSON.stringify(data));
                  return;
                }
                if (utilJs.isIOSAppALL()) {
                  let data = {
                    type: 'login',
                    path: '/',
                    token: loginRes.t,
                    userId: loginRes.u,
                    companyId: loginRes.c
                  }
                  utilJs.sendDataToApp('appSendLoginToken', data)
                  return;
                }
                if (utilJs.isAndroidAudioApp()) {
                  let data = {
                    type: 'login',
                    path: '/',
                    token: loginRes.t,
                    userId: loginRes.u,
                    companyId: loginRes.c
                  }
                  utilJs.sendDataToApp('appSendLoginToken', data)
                }
                $this.$routerGo($this, "replace", {
                  path: "/"
                });
              });
            },
            function () {
              $this.isSubmit = true;
            }
          );
        }
      } else {
        $this.$showCjToast({
          text: "手机号和验证码不能为空",
          type: "warn",
        });
      }
    },
    changeCheckAgreement() {
      this.isCheckAgreement = !this.isCheckAgreement;
      this.isAgree = this.isCheckAgreement ? 1 : 0;
    },
    clickProtocol(item) {
      this.$routerGo(this, "push", { path: `/homePage/agent/protocolInfo`, query: { protocolId: item.protocolId } });
    },
    linkToProtocol(url) {
      if (!url) return
      window.location.href = url;
    },
    getAppUseAndPrivacyProtocols() {
      utilJs.getMethod(`${global.apiurl}app/getAppUseAndPrivacyProtocols?companyId=${localStorage.getItem("companyId")}`, (res) => {
        console.log('安卓app协议打印');
        console.log(res);
        this.isCheckAgreement = false;
        this.protocolInfo = res || null;
      });
    },
    getProtocol() {
      utilJs.getMethod(`${global.apiurl}protocols/getProtocolByProdType?prodType=-2`, (res) => {
        this.protocolInfo = res.protocol && res.protocol.length > 0 ? res.protocol : null;
        this.isCheckAgreement = res.relatesType == 1 ? true : false;
      });
    },
  },
  activated() {
    //ios的手机登录页面
    setDocumentTitle("手机号登录");// eslint-disable-line
    this.isAndroidApp = utilJs.isAndroidApp();
    this.isiOSApp = utilJs.isIOSAppALL();
    this.companyId = utilJs.getCompanyIdByHerf();
    localStorage.setItem("companyId", this.companyId);
    this.isClick = false;
    this.isAgree = 1;
    let devId = this.$route.query.devId || '';
    localStorage.setItem('devId', devId)
    this.$store.commit('updateLoadingStatus', {
      isLoading: false
    });
    this.codeImgInfo = '';
    this.imgCode = '';
    this.getImgCode();
    //安卓app自动登录跳转
    if (localStorage.getItem('userId') && localStorage.getItem('token')) {
      this.$routerGo(this, "replace", {
        path: "/",
      });
      return;
    }
    if (this.isAndroidApp || this.isiOSApp) {
      this.getAppUseAndPrivacyProtocols();
    } else {
      this.getProtocol();
    }
  },
  deactivated() {
    this.num = 60;
    clearInterval(this.interval);
    this.yzText = "获取验证码"
    this.isYz = true;
    this.mobile = null;
    this.code = null; // 验证码
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.vux-cell-box:not(:first-child):before {
  border-top: none !important;
}
</style>
